import Canvas from "./canvas";
import RenderManager from "./RenderManager";
import DataManager from "./DataManager";
import EventManager from "./EventManager";

export default class CanvasManager {
  constructor(node) {
    this.scaleLevel = 1;
    if (node.el) {
      this.el = node.el;
      this.element = document.getElementById(node.el);
    }

    this.RenderManager = RenderManager.instance();
    this.event = EventManager.instance();
    this.datas = DataManager.instance();

    this.event.bind("resize", () => {
      this.resizeCanvasLayers();
      this.RenderManager.renderAll();
    });

    this.event.bind("scale", (data) => {
      this.datas.worldScale.oldScale = this.datas.worldScale.scale;

      if (data.dir === "up") {
        if (this.datas.worldScale.scale + 2 > 16) {
          this.datas.worldScale.scale = 16;
        } else {
          this.datas.worldScale.scale += 2;

          let x = this.datas.worldTransForm.x - data.pos.x / this.scaleLevel;
          let y = this.datas.worldTransForm.y - data.pos.y / this.scaleLevel;

          this.datas.worldTransForm.x = x;
          this.datas.worldTransForm.y = y;

          this.scaleLevel += 1;
        }
      } else {
        if (this.datas.worldScale.scale - 2 < 2) {
          this.datas.worldScale.scale = 2;
        } else {
          this.datas.worldScale.scale -= 2;

          let x = this.datas.worldTransForm.x + data.pos.x / this.scaleLevel;
          let y = this.datas.worldTransForm.y + data.pos.y / this.scaleLevel;
      
          this.datas.worldTransForm.x = x;
          this.datas.worldTransForm.y = y;
          this.scaleLevel -= 1;
        }
      }

      this.RenderManager.renderAll();
    });
  }

  resizeCanvasLayers() {
    this.datas.canvasLayers.forEach((canvas) => {
      canvas.resize();
    });
  }
  navTo(x,y,render=true){
    this.datas.worldTransForm.x  =this.datas.worldTransForm.x - x*this.datas.worldScale.scale / this.scaleLevel;
    this.datas.worldTransForm.y =this.datas.worldTransForm.y - y*this.datas.worldScale.scale / this.scaleLevel;
    
    if(render){
      console.log(this.datas.worldTransForm)
      this.RenderManager.renderAll();
    }
    
  }
  getCanvas(name) {
    let canvas = this.datas.canvasLayers.find((v) => {
      if (v.name === name) {
        return v;
      }
    });
    return canvas;
  }
  createUIelement() {
    let node = document.createElement("div");
    node.className = "node-select";
    node.id = "select-canvas";
    node.hidden = true;
    this.element.append(node);
    let UIevent = new EventManager({ ...this, element: node });

    this.createCanvasNode("ui-select", node.id);
    UIevent.bind("click", function (event) {});

    this.datas.UIslectNode.node = node;
  }
  createCanvasHelp() {
    let node = document.createElement("div");
    node.className = "canvas-help";
    this.element.append(node);
    node.hidden = true;
    node.id = "img-clip";
    this.createCanvasNode("img-clip", node.id);
  }
  createCanvasNode(name = "base", el) {
    let element = this.element;
    if (el) {
      element = document.getElementById(el);
    }

    let node = document.createElement("canvas");
    node.className = "c-canvas " + name;
    node.width = element.clientWidth;
    node.height = element.clientHeight;

    let canvas = new Canvas({
      name,
      canvas: node,
    });

    canvas.setRender(this.RenderManager.getRender(name));

    element.append(node);
    this.datas.canvasLayers.push(canvas);
  }
}
